<template>
	<view>
		<view class="search-input ">
			<label class="iconfont icon-sousuo" />
			<input type="text" confirm-type="search" v-model="search" class="font-size24" placeholder="搜索" />
		</view>
			
		<form class="flowform" @reset="reset">
			<!-- 参考网站 https://blog.csdn.net/YY_ain/article/details/123391460 -->
			<template>
			    <view>
			        <view class="wrap">
			            
			           <scroll-view scroll-y style="height: 100%;width: 100%;">
			           
			           <view class="jn-grid-list margin-top-20" >
			           	<view class="jn-staff-list-cell">
			           		<uni-swipe-action>
			           			<uni-swipe-action-item v-for="(item,index) in staffs1"  :key="index" @click="removeDetils(item,index)">
			           				<!-- <view class="item" @click.stop="staffflow(item)"> -->
			           					<u-card :title="item.F_Name"  :thumb="item.F_Time" >
			           						<template v-slot:body>
			           							<view >
			           								<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
			           									<image :src="item.F_Level1" mode="aspectFill" @click="creqateopen"></image>
			           								</view>
			           							</view>
			           							<view >
			           								<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
			           									<view class="u-body-item-title u-line-2">{{item.F_Level2}}</view>
			           								</view>
			           							</view>
			           						</template>
			           						<template v-slot:foot>
			           							
			           							<view class=""><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view>
			           						</template>
			           					</u-card>
			           																		
			           				<!-- </view> -->
			           			</uni-swipe-action-item>
			           		</uni-swipe-action>
			           	</view>
			           </view>
			           			                 
			           </scroll-view>
			        </view>
			    </view>
			</template>	
			
		</form>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
		
		<!-- 日历 -->
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
		
		<uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" :direction="direction" @creqateopen="creqateopen"></uni-fab>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	
	export default {
		components: {
		},
		data() {
			return {
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
							color: '#7A7E83',
							backgroundColor: '#fff',
							selectedColor: '#007AFF',
							buttonColor: "#007AFF"
						},
										
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,				
				show: false,
				mode: 'date',
				datevalue: this.getdate(),						
				staffList1: [],				
				multiple: false, //多选
				selectParent: false, //父级可选
				
				type: 'textarea',
				border: false,
				height: 100,
				autoHeight: true,
				staff: {},
				mode: '',
				isSearchShow:false,
				pickerList: [],
				isId:false,
				listId:''
			}
		},
		onLoad(e) {
			this.isId = Object.prototype.hasOwnProperty.call(e, 'id');
			this.listId = e.id;
			
			this.init();
		},
		computed: {
			//预约工位内容
			staffs1: function() {
				let search = this.search;
				let staffList = this.staffList1;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			
		},
		onReady(){
					uni.getSystemInfo({
						success: (res) => {
							let topHeight = 100;
							let winHeight = (res.windowHeight * (750/res.windowWidth));
							// boxHeight为屏幕高度 - 顶部高度
							this.boxHeight = winHeight - topHeight + 'rpx';
						}
					});
				},
		methods: {
			staffflow(item) {
				console.log('staffflow')
				uni.navigateTo({
					url: './form?id=' + item.F_Name
				})
			},
			creqateopen() {
				uni.navigateTo({
					url: './form'
				});
			},
			
			
			removeDetils(item, index) {
				console.log('removeDetils')
			},
			
			getdate(){
			   //返回当前日期
			   let date = new Date();
			   let formattedDate = date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }); // 输出格式如 "2023-01-01"
			   console.log(formattedDate);
			   return formattedDate;
			},
			init() {
				var res={
					"data": {
						"code": 200,
						"msg": "Success",
						"data": {
							"list1": [
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/logo1.png",
									"level2": "中国四大博物馆之一，青铜器、陶瓷、书画馆藏顶级",
									"level3": "高中",
									"fullName": "上海博物馆"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base2.jpg",
									"level2": "中共一大会址纪念馆，是介绍中国共产党诞生史迹的革命旧址纪念馆",
									"level3": "高中",
									"fullName": "中国一大会址"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base3.jpg",
									"level2": "上海市落实科教兴国战略和大力推进素质教育的一项标志性工程，也是上海最大的校外教育场所",
									"level3": "高中",
									"fullName": "东方绿舟"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base1.jpg",
									"level2": "上海科技馆，是一座综合性的自然科学技术博物馆，也是中国重要的科普教育基地和精神文明建设基地。",
									"level3": "高中",
									"fullName": "张飞"
								},								
								
							  ],
							"pagination": {
								"currentPage": 1,
								"pageSize": 10,
								"total": 635
							}
						}
					},
					"statusCode": 200,
					"errMsg": "request:ok",
					"cookies": []
				}
				let staff1 = res.data.data.list1;
				this.staffList1=[];
				for (let i = 0; i < staff1.length; i++) {
					this.staffList1.push({
						'F_Time'  : staff1[i].time,
						'F_Name'  : staff1[i].fullName,
						'F_Level1': staff1[i].level1,
						'F_Level2': staff1[i].level2,
						'F_Level3': staff1[i].level3
					})
				}
				
				
				
			},
			
			open() {
				    console.log('消息提示');
			        uni.showToast({
			        	title: '新增弹窗',
			        	duration: 2000
			        });
			      },
				  
			
			submit() {
				//console.log('返回上一页成功');
				// 在某个事件或条件下触发返回上一页操作
				uni.navigateBack({
				    delta: 1, // 返回的页面数，如果是1表示返回上一级页面，可以根据需求调整
				    success: function() {
				        console.log('返回上一页成功');
				    },
				    fail: function(error) {
				        console.error('返回上一页失败', error);
				    }
				});

			},
			reset(e) {
				//console.log('清空数据')
			},
			
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	}
</script>

<style>
	page {
		background-color: #f0f2f6;
	}
	
	.search-input {
			background: #FFFFFF;
		}
</style>
